<!-- 热门景点搜索 -->
<template>

	<view class="content">
		<view class="content-block">
			<view class="block3">
				<view class="dropDownBox">
					<view class="picker-group" @click="showAnew = true">
						<view class="picker">
							综合排序
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
					<view class="picker-group" @click="showOne = true">
						<view class="picker">
							{{ tabsOne }}
							<!-- 倒三角图标 -->
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>

					<view class="picker-group" @click="showThree = true">
						<view class="picker">
							{{ tabsThree }}
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
					<view class="picker-group" @click="showTwo = true">
						<view class="picker">
							{{ tabsTwo }}
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="cardList">
				<view v-for="(item,index) in dataList" :key="index" class="cardItem">
					<view class="statusTag">
						<image :src="statusBg(item.isOpen)" mode="aspectFill" style="width: 90rpx; height: 90rpx;">
						</image>
						<text v-if="item.isOpen">公开</text>
						<text v-else>未公开</text>
					</view>
					<view class="topView">
						<image :src="item.themeImg" class="topViewImg" mode="scaleToFill"></image>
						<view class="rightView">
							<view class="title">
								{{ item.name }}
							</view>
							<view class="tagAsdesc">
								<view class="tag">
									{{ initTag(item.lineType) }}
								</view>
								<view class="desc">
									{{ item.scenicCount }}个景点 | {{ item.taskCount }}个任务 |
									全程{{ Math.ceil(item.distance / 100) / 10 }}km
								</view>
							</view>
						</view>
					</view>
					<view class="bottomView">
						<view class="inviteUser" @tap="openInvitePopup(item)">
							邀请用户
						</view>
						<view class="inviteUser" @tap="showList(item)">
							报名列表
						</view>
					</view>
				</view>
			</view>
			<view class="block5">
				<view v-if="dataList.length < total" class="">
					<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
				</view>

				<view v-else class="noMore">
					<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
				</view>
			</view>
		</view>
		<!-- 综合排序 -->
		<u-picker ref="uPickerAnew" :columns="columnsAnew" :show="showAnew" @cancel="showAnew = false"
			@confirm="confirmAnew">
		</u-picker>
		<!-- 地区 -->
		<u-picker ref="uPickerOne" :columns="columns" :show="showOne" @cancel="showOne = false" @change="changeHandler"
			@confirm="confirmOne">
		</u-picker>
		<!-- 风景类型 -->
		<u-picker ref="uPickerThree" :columns="columnslandscapeName" :show="showThree" @cancel="showThree = false"
			@change="changeLandscape" @confirm="confirmThree">
		</u-picker>
		<!-- 类别 -->
		<u-picker ref="uPickerTwo" :columns="columnsTypeName" :show="showTwo" @cancel="showTwo = false"
			@confirm="confirmTwo">
		</u-picker>


		<!-- 分享邀请弹窗 -->
		<tui-bottom-popup :maskZIndex="1001" :show="popupShowInvite" :zIndex="1002" @close="popupShowInvite= false">
			<view class="popupView">
				<view class="shareItem">
					<button open-type='share'>
						<image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/sharedIcon1.png">
						</image>
						<text open-type="share">分享给朋友</text>
					</button>
				</view>
				<view class="shareItem" style="margin-top: 20rpx;" @tap="sharePoster()">
					<image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/sharedIcon2.png">
					</image>
					<text style="margin-top: 20rpx;">生成海报</text>
				</view>
			</view>
		</tui-bottom-popup>

		<!-- 邀请海报 -->
		<!-- 海报在初始化时会报getdata的错，可忽视 -->
		<tui-poster ref="poster" :height="800" :width="750" @ready="ready"></tui-poster>

		<!-- 报名列表弹窗 -->
		<!-- 在微信开发者工具预览时滑动事件会穿透
           实机预览不会有该情况！ -->
		<tui-modal :show="enrollShow" custom padding="0" radius="10rpx 10rpx 0rpx 0rpx" @cancel="closeList">
			<view class="enrollList">
				<view class="enrollTitle">
					报名列表
				</view>
				<view v-for="(item,index) in listItem" :key="index" class="enrollItem">
					<view class="nameAndphone">
						<view class="name">
							<image mode="aspectFit"
								src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/passengerIcon.png"></image>
							{{ item.name }}
						</view>
						<view class="phone">
							<image mode="aspectFit"
								src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneIcon.png"></image>
							{{ item.tel }}
						</view>
					</view>
					<view class="onesitem">
						<image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/IdCard.png">
						</image>
						{{ item.idCard }}
					</view>
					<view class="onesitem">
						<image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneIcon.png">
						</image>
						{{ item.parentTel || '---' }}
					</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import luxian from '@/components/diy/luxian';
	import {
		popular_destination,
		Popular_route,
		findRegions,
		findDictTree,
		scenicPage,
	} from "@/api/challenge";
	import {
		getRouteListWorker
	} from '@/api/tourplan.js'
	// data 数据 及 方法
	export default {
		components: {
			luxian
		},
		data() {
			return {
				total: 0,
				listData: [],
				showOne: false,
				showTwo: false,
				showThree: false,
				showAnew: false,
				tabsOne: "景点地区",
				tabsTwo: "路线类型",
				tabsThree: "路线风格",
				timer: null,
				activeId: 1,
				areaOnePid: [""],
				areaTwoPid: [],
				areaThreePid: [],
				columns: [
					["全部"],
				],
				columnsAnew: [
					['综合排序']
				],
				columnOneData: [],
				columnTwoData: [],
				columnsTypeName: [
					["全部", '跟团游', "拼团游", "研学", "亲子团游", "自助亲朋"]
				],
				columnsTypeId: ["", 1, 2, 3, 4, 5],
				columnslandscapeName: [
					["全部"],
				],
				columnslandscapeOneName: [
					[]
				],
				columnslandscapeOneId: [
					[]
				],
				name: '',
				dropdownShow: true,
				objData: {
					pageNumber: 1,
					pageSize: 10,
					tel: uni.getStorageSync("userinfo").phone,
					dictId: "",
					locationId: "",
					lineType: ''
				},
				dataList: [],
				listData: [],
				sortIndex: 0, // 默认排序选择
				areaIndex: 0, // 默认地区选择
				typeIndex: 0, // 默认类型选择
				InviteItem: {},
				listItem: [],
				popupShowInvite: false,
				initPoster: false,
				enrollShow: false,
				//海报地址
				goodsPosterUrl: '',
			}
		},
		//分享配置，在用Promise对象时会覆盖return里的数据
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '我邀请你来报名这个路线啦',
							path: '/pages/PopularRoute/RouteDetails?id=' + this.InviteItem.id,
							imageUrl: 'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file49e0d23a5b864f1d8c8144487c32a8af.png'
						})
					}, 500)
				})
				return {
					promise
				}
			}
		},
		onLoad() {
			this.popularDestination()
			findRegions({
				pid: 0
			}).then(res => {
				res.forEach(item => {
					this.columns[0].push(item.name)
					this.areaOnePid.push(item.id)
				})
			})
			findDictTree({
				rootName: '景点类别'
			}).then(res => {
				console.log('景点', res);
				res.forEach((item, index) => {
					this.columnslandscapeName[0].push(item.name)
					this.columnslandscapeOneName.push([])
					this.columnslandscapeOneId.push([])
					item.children.forEach(params => {
						this.columnslandscapeOneName[index + 1].push(params.name)
						this.columnslandscapeOneId[index + 1].push(params.id)
					})
				})
			})

		},
		onReachBottom() {
			this.objData.pageNumber += 1
			this.popularDestination()
		},
		methods: {
			loadmore() {
				this.objData.pageNumber += 1
				this.popularDestination()
			},
			viewClick(data) {
				console.log(data);
				if (data.isReport === 2) {
					//前往旅程感悟页面
				} else {
					uni.navigateTo({
						url: '/pages/tourplan/travelReport/travelReport?itineraryId=' + data.itineraryId +
							'&partyId=' + data.partyId + '&groupId=' + data.groupId
					})
				}
			},
			confirmAnew() {
				this.objData.dictId = ""
				this.objData.locationId = ""
				this.objData.lineType = ""
				this.tabsOne = '景点地区'
				this.tabsTwo = '路线类型'
				this.tabsThree = '路线风格'
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showAnew = false
			},
			bindSortPickerChange(e) {
				this.sortIndex = e.detail.value;
			},
			bindAreaPickerChange(e) {
				this.areaIndex = e.detail.value;
			},
			bindTypePickerChange(e) {
				this.typeIndex = e.detail.value;
			},
			popularDestination() {
				var data = {
					// // 聚力
					appId: "wx5b3843197d34d53b",
				}
				for (let key in this.objData) {
					if (this.objData[key] != '') {
						data[key] = this.objData[key]
					}
				}
				getRouteListWorker(data).then(res => {
					if (this.objData.pageNumber > 1) {
						res.records.forEach(item => {
							this.dataList.push(item)
						})
					} else {
						this.dataList = res.records;
						this.total = res.total
					}

				})
			},


			AttractionsEvent(data) {
				uni.navigateTo({
					url: '/pages/home/AttractionsDetails?id=' + data
				})
			},

			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerOne
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					if (index == 0) {
						console.log('全部', index);
						this.columnOneData = [],
							this.columnTwoData = [],
							picker.setColumnValues(1, [])
						picker.setColumnValues(2, [])
					} else {
						this.columnOneData = []
						this.areaTwoPid = []
						this.columnTwoData = []
						this.areaThreePid = []
						findRegions({
							pid: this.areaOnePid[index]
						}).then(res => {
							res.forEach(item => {
								this.columnOneData.push(item.name)
								this.areaTwoPid.push(item.id)
							})
							findRegions({
								pid: res[0].id
							}).then(params => {
								params.forEach(item => {
									this.columnTwoData.push(item.name)
									this.areaThreePid.push(item.id)
								})
							})
							// picker为选择器this实例，变化第二列对应的选项
							picker.setColumnValues(2, this.columnTwoData)
						})
						// picker为选择器this实例，变化第二列对应的选项
						picker.setColumnValues(1, this.columnOneData)
					}


				}
				if (columnIndex === 1) {

					this.columnTwoData = []
					this.areaThreePid = []
					console.log('222', index);
					findRegions({
						pid: this.areaTwoPid[index]
					}).then(res => {
						res.forEach(item => {
							this.columnTwoData.push(item.name)
							this.areaThreePid.push(item.id)
						})
					})
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columnTwoData)

				}
			},
			changeLandscape(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerThree
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnslandscapeOneName[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmOne(e) {
				console.log(e);
				if (e.indexs[0] == 0) {
					this.objData.locationId = ""
					this.tabsOne = "全部"
				} else {
					this.objData.locationId = this.areaThreePid[e.indexs[2]]
					this.tabsOne = e.value[2]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showOne = false
			},
			confirmTwo(e) {
				this.objData.lineType = this.columnsTypeId[e.indexs[0]]
				this.tabsTwo = e.value[0]
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showTwo = false
			},
			confirmThree(e) {
				console.log(e);
				if (e.value[0] == "全部") {
					this.objData.dictId = ""
					this.tabsThree = "全部"
				} else {
					this.objData.dictId = this.columnslandscapeOneId[e.indexs[0]][e.indexs[1]]
					this.tabsThree = e.value[1]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showThree = false
			},
			seleckEvent(data) {
				this.activeId = data
				if (data == 1) {
					this.showOne = true
				} else if (data == 2) {
					this.showTwo = true
				} else if (data == 3) {
					this.showThree = true
				}
			},
			//处理item标签
			statusBg(status) {
				if (status) {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus4.png'
				} else {
					return 'https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/planStatus.png'
				}
			},
			//处理线路类型tag
			initTag(type) {
				switch (type) {
					case 0:
						return '自建路线'
						break;
					case 1:
						return '跟团游'
						break;
					case 2:
						return '拼团游'
						break;
					case 3:
						return '研学路线'
						break;
					case 4:
						return '亲子团游'
						break;
					default:
						return '自助亲朋游'
						break;
				}
			},
			//打开邀请新用户弹窗
			openInvitePopup(item) {
				console.log('输出', item);
				this.InviteItem = item
				this.popupShowInvite = true
			},

			//分享到微信

			//海报分享
			//海报初始化触发事件
			ready() {
				this.initPoster = true
			},

			//生成分享码
			sharePoster() {
				if (!this.initPoster || !this.$refs.poster) return;
				uni.showLoading({
					title: '绘制中...'
				})
				const data = [{
						type: 'rect',
						style: {
							left: 78,
							top: 0,
							width: 596,
							height: 800,
							backgroundColor: '#ffffff',
							borderRadius: 20
						}
					},
					{
						type: 'image',
						src: this.InviteItem.themeImg,
						// src: 'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file49e0d23a5b864f1d8c8144487c32a8af.png',
						imgType: 2,
						style: {
							left: 78,
							top: 0,
							width: 596,
							height: 448
						}
					},
					{
						type: 'text',
						text: this.InviteItem.name,
						style: {
							left: 98,
							top: 488,
							width: 552,
							fontSize: 36,
							fontWeight: 800,
							rows: 2,
							fontFamily: "PingFang SC",
						},
					},
					{
						type: 'rect',
						style: {
							left: 98,
							top: 548,
							width: this.InviteItem.dictName.length * 28 + 40,
							height: 48,
							backgroundColor: "#ff9802"
						},
					},
					{
						type: 'text',
						text: this.InviteItem.dictName,
						style: {
							left: 118,
							top: 582,
							fontSize: 28,
							color: "#fff"
						},
					},
					{
						type: 'line',
						style: {
							left: 78,
							top: 620,
							endLeft: 674,
							endTop: 620,
							color: "#eeeeee",
							width: 2
						},
					},
					// {
					// 	type: 'image',
					// 	src: this.InviteItem.headImg,
					// 	// src: 'https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file49e0d23a5b864f1d8c8144487c32a8af.png',
					// 	imgType: 2,
					// 	style: {
					// 		left: 10,
					// 		top: 720,
					// 		width: 80,
					// 		height: 80,
					// 		borderRadius: 50,
					// 	}
					// },
					{
						type: 'text',
						text: this.InviteItem.userImg,
						style: {
							left: 98,
							top: 686,
							width: 440,
							fontSize: 32,
							rows: 1,
							fontFamily: "PingFang SC",
							color: '#212121'
						}
					},

					{
						type: 'image',
						src: this.InviteItem.img,
						imgType: 2,
						style: {
							left: 574,
							top: 640,
							width: 84,
							height: 84
						}
					},
					{
						type: 'text',
						text: '长按保存',
						style: {
							left: 320,
							top: 790,
							fontSize: 24,
							color: '#333333'
						}
					},
				]

				this.$refs.poster.draw(data, (filePath) => {
					//绘制图片路径
					this.goodsPosterUrl = filePath;
					uni.previewImage({
						urls: [filePath]
					});
					uni.hideLoading()
					this.popupShowInvite = false
				})
			},


			//打开报名列表弹窗
			showList(item) {
				this.listItem = item.parties
				this.enrollShow = true
			},
			//关闭报名列表
			closeList() {
				this.enrollShow = false
			}
		}


	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC, PingFang SC-Regular;
		height: 100vh;
		background-color: #F2F2F2;
	}

	.block1 {
		width: 100%;

		background-color: #fff;
	}

	.block2 {
		margin-top: 20rpx;
		background-color: #F2F2F2;

	}

	.noMore {
		background-color: #F2F2F2;
		width: 100%;
		height: 250rpx;
	}

	.dropDownBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;

		.picker-group {
			.picker {
				font-size: 28rpx;
			}
		}
	}

	.picker-group-row {
		display: flex;
		align-items: center;
	}

	.picker-item {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.content-block {
		background-color: #F2F2F2;
	}

	.blocok5 {
		justify-content: center;
	}

	.block5 {
		display: flex;
		/* 使用Flexbox布局 */
		flex-direction: column;
		/* 设置为垂直方向 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 400rpx;
		/* 确保有足够的高度，根据需要调整高度 */
		background-color: #F2F2F2;
	}

	.noMore {
		text-align: center;
	}

	.search {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		padding: 20rpx 30rpx;
	}

	.cardList {

		.cardItem {
			position: relative;
			margin: 30rpx 32rpx 0 32rpx;
			background-color: white;
			border-radius: 12rpx;

			.statusTag {
				position: absolute;
				z-index: 999;

				text {
					position: absolute;
					color: white;
					top: 10px;
					left: 2px;
					font-size: 20rpx;
					transform: rotate(0.85turn);
				}
			}

			.topView {
				display: flex;
				padding: 20rpx 0 20rpx 20rpx;

				.topViewImg {
					width: 152rpx;
					height: 152rpx;
					border-radius: 12rpx;
				}

				.rightView {
					margin-left: 20rpx;

					.title {
						width: 484rpx;
						height: 90rpx;
						font-weight: 800;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.tagAsdesc {
						display: flex;
						font-size: 24rpx;
						align-items: center;

						.tag {
							border: 2rpx solid #4186f5;
							border-radius: 8rpx;
							color: #4186f5;
							padding: 2rpx 3rpx;
						}

						.desc {
							margin-left: 10rpx;
						}
					}
				}
			}

			.bottomView {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				color: white;
				border-top: 2rpx solid #eeeeee;
				padding: 22rpx 0;
				font-size: 28rpx;

				.inviteUser {
					width: 160rpx;
					height: 52rpx;
					background: #4186f5;
					border-radius: 12rpx;
					line-height: 52rpx;
					text-align: center;
				}
			}
		}
	}

	.popupView {
		display: flex;
		width: 100%;
		height: 200rpx;
		align-items: center;

		.shareItem {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-items: center;

			button {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 40rpx;
				background-color: white;
			}

			button::after {
				border: none;
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #212121;
			}
		}
	}

	.enrollList {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 870rpx;
		width: 100%;
		border-radius: 10rpx 10rpx 0rpx 0rpx;

		.enrollTitle {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 96rpx;
			background-color: #4186F5;
			text-align: center;
			font-size: 16px;
			font-family: PingFang SC, PingFang SC-Heavy;
			font-weight: 800;
			color: white;
		}

		.enrollItem {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 20rpx;
			height: 184rpx;
			width: 90%;
			background-color: #E9F4FF;
			font-size: 28rpx;
			color: #212121;

			.nameAndphone {
				display: flex;
				flex: 1;
				align-items: center;

				.name {}

				.phone {
					flex: 1;
					margin-left: 25rpx;
				}
			}

			.onesitem {
				flex: 1;
				display: flex;
				align-items: center;
				// height: 40rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>